@import '../../../assets/css/mixin.less';

.loginPage {
  width: 100vm;
  height: 100vh;
  // background-color: aqua;
  display: flex;
  justify-content: space-between;
  .loginLeftBox {
    width: 65%;
    height: 100%;
    // border: 1px solid red;
    background-image: url('../../../assets/images/loginLeftBoxImage.png');
    background-size: 100% 100%;
    // background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-y: auto;

    .scrollbar-light {
      .scrollbar(
        hsla(0,0%,0%,0.2), hsla(0,0%,0%,0.05),
        hsla(0,0%,0%,0.15)
      );
    }
    .leftTop {
      width: 100%;
      height: 140px;
      display: flex;
      justify-content: center;
      .leftTopCenter {
        width: 90%;
        height: 100%;
        margin-top: 30px;

        // background-color: aqua;
      }
    }
    .leftBottom {
      width: 100%;
      height: 600px;
      display: flex;
      align-items: center;
      justify-content: center;

      .leftBottomCenter {
        width: 90%;
        height: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        padding: 10px 10px;
        .bottomCenterTop {
          width: 100%;
          height: 30px;
          background-color: #f2f6ff;
          border-radius: 50px;
          display: flex;
          align-items: center;
          .throw1 {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fb9c9b;
            margin-left: 10px;
          }
          .throw2 {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fcd682;
            margin-left: 10px;
          }
          .throw3 {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #79dd8c;
            margin-left: 10px;
          }
        }
        // 平台概况的样式
        .bottomCenterBottom {
          margin-top: 10px;
          width: 100%;
          height: 90%;
          background-color: #f2f6ff;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          position: relative;
          .topImage {
            width: 100%;
            height: 60px;
            // background-color: orange;
            // border: 1px solid orange;
            border-radius: 10px;
            display: flex;
            justify-content: flex-end;
            .imgBox {
              width: 60px;
              height: 50px;
              display: flex;
              align-items: center;
              img {
                width: 60px;
                height: 50px;
              }
            }
          }
          .bottomFont {
            flex: 1;
            padding: 10px 10px;
            overflow: auto;
            // background-color: aqua;
          }
          .bottomImage {
            width: 270px;
            height: 300px;
            // background-color: aqua;
            position: absolute;
            bottom: -180px;
            left: -40px;
            svg {
              width: 270px;
              height: 250px;
            }
          }
        }
        .bottomCenterBottom1 {
          margin-top: 10px;
          width: 100%;
          height: 90%;
          background-color: #f2f6ff;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          position: relative;
          .topImage {
            width: 100%;
            height: 60px;
            // background-color: orange;
            // border: 1px solid orange;
            border-radius: 10px;
            display: flex;
            justify-content: flex-end;
            .imgBox {
              width: 60px;
              height: 50px;
              display: flex;
              align-items: center;
              img {
                width: 60px;
                height: 50px;
              }
            }
          }
          .bottomFont {
            flex: 1;
            padding: 10px 10px;
            overflow: auto;
            // background-color: aqua;
          }
          .bottomImage {
            width: 230px;
            height: 230px;
            // background-color: aqua;
            position: absolute;
            bottom: -150px;
            right: -30px;
            svg {
              width: 230px;
              height: 230px;
            }
          }
        }
        .bottomCenterBottom2 {
          margin-top: 10px;
          width: 100%;
          height: 90%;
          background-color: #f2f6ff;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          position: relative;
          .topImage {
            width: 100%;
            height: 60px;
            // background-color: orange;
            // border: 1px solid orange;
            border-radius: 10px;
            display: flex;
            justify-content: flex-end;
            .imgBox {
              width: 60px;
              height: 50px;
              display: flex;
              align-items: center;
              img {
                width: 60px;
                height: 50px;
              }
            }
          }
          .bottomFont {
            flex: 1;
            overflow: auto;
            p {
              margin: 10px 10px;
            }
            // background-color: aqua;
          }
          .bottomImage {
            width: 230px;
            height: 230px;
            // background-color: aqua;
            position: absolute;
            bottom: -120px;
            left: -41px;
            svg {
              width: 230px;
              height: 230px;
            }
          }
        }
      }
    }
  }
  .loginRightBox {
    width: 35%;
    height: 100%;
    // border: 1px solid orange;
    display: flex;
    flex-direction: column;
    .top {
      width: 100%;
      height: 160px;
      // background-color: rgba(0, 255, 255, 0.555);
      display: flex;
      justify-content: center;
      align-items: center;
      .titleBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
        }
        .titleFont {
          font-size: 25px;
          color: #5584ff;
          margin-left: 20px;
        }
      }
    }
    .bottom {
      // width: 100%;
      height: 600px;
      // flex: 1;
      // background-color: rgba(255, 166, 0, 0.438);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
